<template>
    <!-- 选项结果 -->
    <v-chip class="pl-0 pr-1" v-if="props.mode != 'view'">
        <div class="flex align-center">
            <v-avatar color="surface-variant" size="20" class="mr-1">
                <v-img alt="" :src="props.item.raw[props.itemAvatar]"></v-img>
            </v-avatar>
            <span class="mr-1">{{ props.item.raw[props.itemTitle] }}</span>
            <!-- 刪除 -->
            <svg-icon iconClass="close1" size="18" @mouseup.stop="" @mousedown.stop=""
                @click.stop.prevent="emit('del')" v-if="props.multiple"></svg-icon>
        </div>
    </v-chip>

    <!-- 查看结果 -->
    <v-chip class="pl-0 pr-1" v-else>
        <div class="flex align-center">
            <v-avatar color="surface-variant" size="20" class="mr-1">
                <v-img alt="" :src="props.item[props.itemAvatar]"></v-img>
            </v-avatar>
            <span class="mr-1">{{ props.item[props.itemTitle] }}</span>
        </div>
    </v-chip>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits(['del']);

const props = defineProps({
    mode: {
        type: String,
        default: ''
    },
    item: {
        type: Object
    },
    multiple: {
        type: Boolean
    },
    itemTitle: {
        type: String,
        default: ''
    },
    itemDesc: {
        type: String,
        default: ''
    },
    itemValue: {
        type: String,
        default: ''
    },
    itemAvatar: {
        type: String,
        default: ''
    },
    itemPosition: {
        type: String,
        default: ''
    }
});
</script>

<style scoped></style>